<template>
	<common-card class="portal_learn_duration_chart">
		<template #header>
			<h4>学习时长分布</h4>
			<p>
				共学习
				<span>{{ totalDuration }}</span>
				分钟
			</p>
		</template>
		<sw-chart :option="chartOption" auto-resize></sw-chart>
	</common-card>
</template>

<script lang="ts" setup>
import { useChart } from '@/hooks';
import commonCard from '../commonCard.vue';
import type { EChartsOption } from 'echarts';
defineOptions({ name: 'LearnDurationChart' });
interface ChartProp {
	name: string;
	value: number;
}
const totalDuration = ref(0);
const chartData = ref<ChartProp[]>([
	{ name: '视频观看', value: 150 },
	{ name: '平时练习', value: 63 },
	{ name: '测验作业', value: 53 },
	{ name: '讨论发帖', value: 34 }
]);
const colors = ['#246EFF', '#00B2FF', '#81E2FF', '#846BCE', '#86DF6C'];
const { chartOption } = useChart((isDark: EChartsOption) => {
	return {
		legend: {
			top: 0,
			left: 0,
			itemStyle: { borderWidth: 0 },
			textStyle: { color: isDark ? 'rgba(255,255,255,0.7)' : '#4E5969' },
			data: chartData.value.map((n: any) => n.name)
		},
		tooltip: { show: true, trigger: 'item' },
		series: [
			{
				type: 'pie',
				radius: ['36%', '45%'],
				center: ['50%', '60%'],
				label: { formatter: '{d}% ', color: isDark ? 'rgba(255, 255, 255, 0.7)' : '#4E5969' },
				itemStyle: { borderColor: isDark ? '#000' : '#fff', borderWidth: 1, borderRadius: 10 },
				data: chartData.value
			}
		]
	};
});
onMounted(() => {
	totalDuration.value = chartData.value.reduce((prev, cur) => prev + cur.value, 0);
});
console.log(chartOption);
</script>

<style lang="scss" scoped>
.portal_learn_duration_chart {
	&:deep(.arco-card-header) {
		height: auto;
		padding: 16px 0 !important;
		h4 {
			line-height: 1;
			margin-bottom: 10px;
		}
		p {
			display: flex;
			line-height: 1;
			font-weight: normal;
			color: var(--color-text-4);
		}
		span {
			font-weight: bold;
			color: var(--color-primary-light-4);
		}
	}
}
</style>
